<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1、引入依赖 -->
  <!-- crossorigin  将远程js脚本错误在本地显示出来 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>

  <!-- 
    react开发依赖（必须依赖的三个库）：
      1、react 包含react所必须的核心代码
      2、react-dom  react渲染在不同平台所需要的核心代码
      3、babel 将jsx转换成React代码的工具
   -->
   
   <!-- 开始开发 -->
   <!-- 注意：使用jsx，并且希望script中的jsx代码被解析，必须在script标签中添加一个属性 type="text/babel"-->
    
   <script type="text/babel">
    //  const appContainer = document.querySelector('#app')
    //  const root = ReactDOM.createRoot(appContainer)

     let message = 'hello world'
 
     function changeText(){
       message = 'hello react'
       //此时message改变了，但界面文字并未改变，因为需要重新渲染dom
       render()
     }
    
    function render(){
      // react代码
      // react16
      // ReactDOM.render(渲染的内容, 挂载的对象)
      // <h1>Hello, world!</h1> jsx代码
      ReactDOM.render(
        <div>
          <h1>{message}</h1>
          <button onClick={changeText}>改变文本</button>
        </div>,
        document.getElementById('app')
      );

      // // react18
      // root.render(
      //   <div>
      //     <h2>{message}</h2>
      //     <button onClick={changeText}>改变文本</button>
      //   </div>
      // )
    }
    
    render()
   </script>
</body>
</html>